<div ng-controller="TooltipDemoCtrl">
  <div class="well">
    <div>Dynamic Tooltip Text: <input type="text" ng-model="dynamicTooltipText"></div>
    <div>Dynamic Tooltip Popup Text: <input type="text" ng-model="dynamicTooltip"></div>
    <p>
      Pellentesque <a><span tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</span></a>,
      sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
      aliquam. Tincidunt lobortis feugiat vivamus at 
      <a><span tooltip-placement="left" tooltip="On the Left!">left</span></a> eget
      arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
      <a><span tooltip-placement="right" tooltip="On the Right!">right</span></a> 
      nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas 
      <a><span tooltip-placement="bottom" tooltip="On the Bottom!">bottom</span></a> 
      pharetra convallis posuere morbi leo urna, 
      <a><span tooltip-animation="false" tooltip="I don't fade. :-(">fading</span></a> 
      at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus
      <a><span tooltip-popup-delay='1000' tooltip='appears with delay'>delayed</span></a> turpis massa tincidunt dui ut.
    </p>

    <p>
      I can even contain HTML. <a><span tooltip-html-unsafe="{{htmlTooltip}}">Check me out!</span></a>
    </p>
    <p>
      Or use custom triggers, like focus: 
      <input type="text" value="Click me!"
        tooltip="See? Now click away..." 
        tooltip-trigger="focus"
        tooltip-placement="right" />
    </p>
  </div>
</div>
